<template>
  <div class="container">
    <!-- 顶部文字部分 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="crumbs">
      <el-breadcrumb-item :to="{ path: '/hotel' }">{{
        newData.big_cate
      }}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/hotel' }">{{
        breadcrumb
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ newData.name }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hotel">
      <div class="title">
        {{ newData.name }}
        <span
          class="iconfont iconhuangguan"
          v-for="(item, index) in lever"
          :key="index"
        ></span>
      </div>
      <span class="bottom">
        {{ newData.alias }} <br />
        <i class="iconfont iconlocation"></i>
        {{ newData.address }}
      </span>
    </div>
    <!-- 中间图片部分 -->
    <div class="photo">
      <el-carousel height="500px">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" />
        </el-carousel-item>
      </el-carousel>
      <!-- <img :src="newData.photos" alt="" /> -->
    </div>
    <!-- table表格部分 -->
    <div class="table">
      <el-table :data="tbData" style="width: 100%" @row-click="youClick">
        <el-table-column label="价格来源" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="低价房型" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最低价格/每晚">
          <template slot-scope="scope">
            <span class="yellow">¥ {{ scope.row.price }}</span>
            起
            <span class="el-icon-arrow-right yellow"></span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 高德地图模块 -->
    <div class="map" style="margin:40px 0">
      <div id="container">123</div>
    </div>
    <!-- 酒店基本信息表格 -->
    <div class="information">
      <el-table :data="tableData" height="250" style="width: 100%">
        <el-table-column width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.name" :key="index">{{
              item
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="180">
          <template slot-scope="scope">
            <span>{{ scope.row.leave }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.start }}</span>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部评论区 -->
    <div class="comment">
      <h4>153条真实用户评论</h4>
      <div class="son">
        <div class="allComment">
          总评价: {{ newData.all_remarks }}<br />
          好评数: {{ newData.good_remarks }}<br />
          差评数: {{ newData.bad_remarks }}
        </div>
        <!-- 星星评分模块 -->
        <div class="pingfen">
          <div class="xingxing">
            <el-rate
              v-model="value"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}分"
            >
            </el-rate>
          </div>
          <div class="seal">
            非常推荐
          </div>
        </div>
        <!-- 右侧进度条评分 -->
        <div class="jindutiao">
          <div class="jdt">
            <el-progress
              type="circle"
              :percentage="scores.environment * 10"
              :show-text="false"
              :width="70"
              :stroke-width="2"
              color="#ff9a04"
              stroke-linecap="butt"
            ></el-progress>
          </div>
          <!-- 内部文字 -->
          <div class="wenzi">
            环境<br />
            {{ scores.environment }}
          </div>
        </div>
        <div class="jindutiao">
          <div class="jdt">
            <el-progress
              type="circle"
              :percentage="scores.product * 10"
              :show-text="false"
              :width="70"
              :stroke-width="2"
              color="#ff9a04"
              stroke-linecap="butt"
            ></el-progress>
          </div>
          <!-- 内部文字 -->
          <div class="wenzi">
            产品<br />
            {{ scores.product }}
          </div>
        </div>
        <div class="jindutiao">
          <div class="jdt">
            <el-progress
              type="circle"
              :percentage="scores.service * 10"
              :show-text="false"
              :width="70"
              :stroke-width="2"
              color="#ff9a04"
              stroke-linecap="butt"
            ></el-progress>
          </div>
          <!-- 内部文字 -->
          <div class="wenzi" v-if="scores.service">
            服务<br />
            {{ scores.service.toFixed(1) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newData: {},
      // 面包屑数据
      breadcrumb: "",
      // 酒店星级
      lever: [],
      //轮播图数据
      imgs: [
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599820288343&di=662983e8a39ff56fde17400ad02be72b&imgtype=0&src=http%3A%2F%2Fwww.51mice.com%2Fuploadfile%2Fhotel%2F1385627662661.JPG",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599819103778&di=3959ef47f780a11cf47e46841dd820cb&imgtype=0&src=http%3A%2F%2Fstatic-xiaoguotu.17house.com%2Fxgt%2Ft%2F01%2F1462382199167.jpg",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599819254633&di=ce3007bced0c6ed6bd0fa73d4a263ac2&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20170531%2F0b3b2216c0794cfe872ab05551b1ca28_th.png",
        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599819254628&di=6f0ac1ea51a8d88548f9ae4fdf6571de&imgtype=0&src=http%3A%2F%2Fr.bstatic.com%2Fimages%2Fhotel%2Fmax1024x768%2F814%2F81465137.jpg"
      ],
      //房型表格数据
      tbData: [
        {
          date: "携程",
          name: "海景房",
          price: 194
        },
        {
          date: "艺龙",
          name: "海景房",
          price: 216
        },
        {
          date: "Hotels.com",
          name: "海景房",
          price: 143
        }
      ],
      //酒店信息表格数据
      tableData: [
        {
          date: "基本信息",
          name: "入住时间: 14:00以后",
          leave: "离店时间: 12:00之前",
          start: "2014年开业 / 2015年装修",
          price: "酒店规模: 200间客房"
        },
        {
          date: "主要设施",
          name: ["-"]
        },
        {
          date: "停车服务",
          name: "-"
        },
        {
          date: "品牌信息",
          name: "-"
        }
      ],
      //星星评分
      value: 4,
      //环境 产品 服务评分
      scores: {},
      // scores数据乘以10 进度图
      newScores: {},
      //地图坐标
      location: {}
    };
  },
  created() {
    console.log(this.$route.params.details);
    this.$axios({
      url: "/hotels/" + this.$route.params.details,
      method: "get"
    }).then(res => {
      //成功回调
      console.log(res);
      this.newData = res.data;
      // 面包屑数据
      this.breadcrumb = res.data.breadcrumb.split(" >")[0];
      // 酒店星级
      this.lever.length = res.data.hotellevel.level;
      //价格
      for (let i = 0; i < this.tbData.length; i++) {
        this.tbData[i].price = res.data.price;
      }
      //分割线
      //酒店设施
      res.data.hotelassets.forEach(element => {
        this.tableData[1].name.splice(0, 0, element.name);
      });
      this.tableData[1].name.pop();
      console.log(this.tableData[1].name);
      //停车服务
      if (res.data.parking) {
        this.tableData[2].name = res.data.parking;
      }
      //品牌信息
      if (res.data.hotelbrand) {
        this.tableData[3].name = res.data.hotelbrand.name;
      }
      //星星评分数据
      this.value = res.data.stars;
      //环境 产品 服务评分
      this.scores = res.data.scores;
      //地图坐标
    });
  },
  mounted() {
    window.onLoad = function() {
      var map = new AMap.Map("container", {
        resizeEnable: true
      });
      AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          type: "餐饮服务", // 兴趣点类别
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          city: "010", // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });

        var cpoint = [
          this.newData.location.longitude,
          this.newData.location.latitude
        ]; //中心点坐标
        placeSearch.searchNearBy("", cpoint, 20000, function(
          status,
          result
        ) {});
      });
    };
    const url =
      "https://webapi.amap.com/maps?v=1.4.15&key=	7c178ae056a869c2b11f2086276bd67b&callback=onLoad";
    const jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
  },
  methods: {
    youClick(row) {
      if (row.date == "携程") {
        // location.href = "https://www.ctrip.com/";
        window.open("https://www.ctrip.com/");
      } else if (row.date == "艺龙") {
        window.open("http://www.elong.com/");
      } else if (row.date == "Hotels.com") {
        window.open("https://www.thepaper.cn/");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  .crumbs {
    padding: 20px 0;
  }
  .hotel {
    .title {
      font-size: 26px;
      .iconhuangguan {
        color: #f90;
      }
    }
    .bottom {
      color: #666;
    }
  }
  .photo {
    margin: 40px 0;
  }
  .yellow {
    font-size: 18px;
    color: #ff9900;
  }
  .information {
    /deep/ .el-table__header-wrapper {
      display: none;
    }
    /deep/ .el-table::before {
      display: none;
    }
    /deep/ tr:nth-child(2) {
      td:nth-child(2) {
        .cell {
          width: 700px;
          position: relative;
          z-index: 1;
        }
        span {
          display: inline-block;
          padding: 5px;
          margin-right: 10px;
          background-color: #eeeeee;
          border-radius: 5px;
        }
      }
    }
    /deep/ tr:nth-child(3) {
      td:nth-child(2) {
        .cell {
          width: 700px;
          position: relative;
          z-index: 1;
        }
      }
    }
    /deep/ tr {
      height: 60px;
    }
  }
  //评论区
  .son {
    display: flex;
    width: 1000px;
    height: 114px;
    padding: 20px 0;
    margin-bottom: 30px;
    align-items: center;
    div {
      height: 100%;
    }
    .allComment {
      width: 166px;
    }
    .pingfen {
      width: 208px;
      position: relative;
      .xingxing {
        margin-top: 25px;
      }
      .seal {
        position: absolute;
        left: 20px;
        top: 0;
        border: 2px solid #fa3;
        text-align: center;
        line-height: 70px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        opacity: 0.7;
        transform: rotate(-30deg);
        font-size: 24px;
        line-height: 70px;
        color: #fa3;
      }
    }
    .jindutiao {
      width: 125px;
      position: relative;
      /deep/ .el-progress-circle__track {
        display: none;
      }
      .wenzi {
        position: absolute;
        width: 32px;
        height: 74px;
        top: 14px;
        left: 18px;
        text-align: center;
        color: #ffa11c;
      }
    }
  }
  //地图
  #container {
    width: 1000px;
    height: 360px;
  }
}
</style>
